<template>
  <div>
    <el-tabs v-model="active" v-if="name && formConfig.length > 0">
      <el-tab-pane :label="name" name="properties">
        <component :is="getComponentName" :config="selectNode.props" />
      </el-tab-pane>
      <el-tab-pane label="表单权限设置" name="permissions">
        <FormAuthorityConfig />
      </el-tab-pane>
    </el-tabs>
    <component :is="getComponentName" v-else :config="selectNode.props" />
  </div>
</template>

<script setup name="NodeConfig" lang="ts">

import FormAuthorityConfig from "./FormAuthorityConfig.vue";
import ApprovalNodeConfig from "./ApprovalNodeConfig.vue";
import ConditionNodeConfig from "./ConditionNodeConfig.vue";
import DelayNodeConfig from "./DelayNodeConfig.vue";
import CCNodeConfig from "./CCNodeConfig.vue";
import TriggerNodeConfig from "./TriggerNodeConfig.vue";
import RootNodeConfig from "./RootNodeConfig.vue";
import {computed, ref} from "vue";
import {NODE_MODEL} from "@/components/Process/DefaultNodeProps";
const ConfigComponentMap = new Map<string, any>();

//动态组件使用
const initMap = (): void => {
  ConfigComponentMap.set('ROOT', RootNodeConfig);
  ConfigComponentMap.set('APPROVAL', ApprovalNodeConfig);
  ConfigComponentMap.set('CC', CCNodeConfig);
  ConfigComponentMap.set('DELAY', DelayNodeConfig);
  ConfigComponentMap.set('TRIGGER', TriggerNodeConfig);
  ConfigComponentMap.set('CONDITION', ConditionNodeConfig);
  ConfigComponentMap.set('CONCURRENT', '');
  ConfigComponentMap.set('EMPTY', '');
}
initMap();

const active = ref("properties");

const selectNode = ref(NODE_MODEL.selectedNode);

const formConfig = computed(() => {
  return NODE_MODEL.design.formItems;
});

const name = computed(() => {
  // console.log('类型',selectNode.value?.type);
  switch (selectNode.value.type) {
    case "ROOT":
      return "设置发起人";
    case "APPROVAL":
      return "设置审批人";
    default:
      return "";
  }
});

const getComponentName = computed(():string => {
  const nodeType = (selectNode.value?.type || '');
  console.log(ConfigComponentMap.has(nodeType) ? ConfigComponentMap.get(nodeType) : nodeType,'组件名')
  return ConfigComponentMap.has(nodeType) ? ConfigComponentMap.get(nodeType) : nodeType;
});

onMounted(()=>{
  console.log(name.value,'name-config')
  console.log(active.value,'active-config')
  console.log(selectNode.value,'selectNode-config')
  console.log(formConfig.value,'formConfig-config')
});
</script>

<style lang="scss" scoped></style>
